<template>
    <div>
        <MymHeader></MymHeader>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <div>
                    <h4>Java全栈学习线路</h4>
                    <div>
                        <van-button hairline round type="info" size="mini">开始学习</van-button>
                    </div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div>
                    <h4>Python人工智能学习线路</h4>
                    <div>
                        <van-button hairline round type="info" size="mini">开始学习</van-button>
                    </div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div>
                    <h4>大数据分析学习线路</h4>
                    <div>
                        <van-button hairline round type="info" size="mini">开始学习</van-button>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div class="main-container">
            <van-row>
                <van-col span="10" style="padding: 5px;color: #666">
                    <van-icon name="records"/>
                    最新博文
                </van-col>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-cell-group>
                        <van-cell title-class="top-subject-title" value-class="top-subject-time"
                                  label-class="top-subject-summay" v-for="(a,index) in articleList"
                                  :title="a.title.substr(0,20)" :value="a.catalogName+'.'+a.createTime"
                                  :label="a.summary" @click="showArticleDetails(a.aid)"/>
                    </van-cell-group>
                </van-col>
            </van-row>
            <van-row>
                <van-col span="10" style="padding: 5px;color: #666">
                    <van-icon name="guide-o"/>
                    最新教程
                </van-col>
            </van-row>
            <van-row>
                <van-col span="24">
                    <div class="top-course-list">
                        <div class="top-course-list-item" v-for="(c,index) in courseList">
                            <img :src="c.logo" @click="showCourseDetail(c.cid,c.aid)">
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
        <MymNavBar></MymNavBar>
    </div>
</template>

<script>

    import MymNavBar from "@/components/mobile/MymNavBar";
    import MymHeader from "@/components/mobile/MymHeader";
    import request from "@/util/request";

    export default {
        name: "Index",
        components: {
            MymNavBar,
            MymHeader
        },
        data() {
            return {
                articleList: [],
                courseList: []
            }
        },
        mounted() {
            this.initTopArticleList();
            this.initTopCourseList();
        },
        methods: {
            showArticleDetails(aid) {
                //this.$toast('显示最新博文详情....');
                //console.log('显示最新博文详情....,文章编号是：'+aid);
                window.location.href = '/mBlogDetails?aid=' + aid;
            },

            showCourseDetail(cid, aid) {
                //this.$toast('显示最新课程详情....');
                window.location.href = '/mCourseDetails?cid=' + cid + '&aid=' + aid;
            },

            initTopArticleList() {
                request.get('/blog/article/top/4').then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.articleList = resp.data.data;
                        //console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            initTopCourseList() {
                request.get('/blog/course/top/4').then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.courseList = resp.data.data;
                        //console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 150px;
        /*line-height: 150px;*/
        text-align: center;
        background-color: #5cbefa;
    }

    .van-swipe-item {
        height: 150px;
    }

    .main-container {
        padding-bottom: 60px;
    }

    .top-subject-title {
        font-size: 12px;
        font-weight: bold;
        color: #336699;
    }

    .top-subject-time {
        font-size: 10px;
        color: #ccc;
        font-weight: lighter;
    }

    .top-subject-summay {
        font-size: 12px;
        font-weight: lighter;
    }

    .top-course-list {
        margin: 0px auto;
        text-align: center;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
        padding: 0px;
    }

    .top-course-list-item {
        text-align: center;
        margin: 0px auto;
    }

    .top-course-list-item img {
        width: 160px;
        height: 110px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 5px 5px #dbd7d7;
    }
</style>